<template>
	<view class="goods-detail">
		<u-navbar autoBack bgColor="transparent" leftIconColor="#fff"></u-navbar>

		<u-swiper
			:list="goodsInfo.imgs"
			keyName="url" radius="0" height="750rpx"
			circular indicatorStyle="right: 20px"
			@change="swiperChange"
		>
			<view slot="indicator" class="indicator-num">
				<view class="left">
					<text>{{ swiperCurrent + 1 }}</text>
				</view>
				<view class="right">
					<text>{{ goodsInfo.imgs.length }}</text>
				</view>
			</view>
		</u-swiper>
		
		<view class="goods-info">
			<view class="flex items-center justify-between">
				<view class="price">
					<text class="icon">￥</text>
					<text class="value">{{ goodsInfo.price }}</text>
				</view>
				<button class="share" size="mini" open-type="share">
					<u-icon name="share-square" color="#666" size="46rpx"></u-icon>
					<view class="text">分享</view>
				</button>
			</view>
			<view class="mt-28 flex items-center justify-between">
				<view class="original">￥{{ goodsInfo.original_price }}</view>
				<view class="sales">已售{{ goodsInfo.sales }}份</view>
			</view>
			<view class="title">{{ goodsInfo.name }}</view>
		</view>
		
		<view class="ensure-box">
			<view class="item">
				<text class="iconfont icon-duihao"></text>
				<text class="text">正品保证</text>
			</view>
			<view class="item">
				<text class="iconfont icon-duihao"></text>
				<text class="text">售后保障</text>
			</view>
			<view class="item">
				<text class="iconfont icon-duihao"></text>
				<text class="text">退换无忧</text>
			</view>
			<view class="item">
				<text class="iconfont icon-duihao"></text>
				<text class="text">急速配送</text>
			</view>
		</view>
		
		<view class="detail-box">
			<view class="title">产品详情</view>
			<u-parse :content="goodsInfo.detail"></u-parse>
		</view>
		
		<view class="bottom-box">
			<view class="tool-box">
				<view class="item" @click="serviceShow = true">
					<u-icon name="chat" color="#666" size="48rpx"></u-icon>
					<view class="label">客服</view>
				</view>
			</view>
			<button class="btn" @click="goOrder">立即购买</button>
		</view>
		
		<u-popup :show="serviceShow" round="28rpx" mode="center" closeable :safeAreaInsetBottom="false" @close="serviceShow = false">
			<view class="service-popup">
				<view class="title">客服微信</view>
				<view class="qrcode-box">
					<image class="qrcode" :src="config.kefu_img" mode="aspectFill" show-menu-by-longpress></image>
				</view>
				<view class="tips">长按识别二维码</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getGoodsDetail, getConfig } from '@/api/api.js'

	export default {
		data () {
			return {
				spu: '',
				swiperCurrent: 0,
				goodsInfo: {
					imgs: []
				},
				tagStyle: {
					video: `width: 100%;height: 1000rpx;vertical-align: middle;`,
					img: 'vertical-align: middle;',
				},
				
				config: {},
				serviceShow: false,
			}
		},
		onLoad (options) {
			this.spu = options.spu
			
			uni.showLoading({ mask: true })
			getGoodsDetail({ spu: this.spu }).then(res => {
				uni.hideLoading({ noConflict: true })
				if (res) {
					this.goodsInfo = res.data.data
				}
			})
			
			getConfig().then(res => {
				if (res) {
					this.config = res.data
				}
			})
		},
		onShareAppMessage (el) {
			return {
				path: '/pages/my/shop/detail?spu=' + this.spu,
			}
		},
		methods: {
			swiperChange (e) {
				this.swiperCurrent = e.current
			},
			goOrder () {
				uni.navigateTo({
					url: '/pages/my/shop/oreder',
					success: (res) => {
						res.eventChannel.emit('onShopOrder', this.goodsInfo)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.goods-detail {
	box-sizing: border-box;
	min-height: 100%;
	padding-bottom: 132rpx;
	padding-bottom: calc(132rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(132rpx + env(safe-area-inset-bottom));
	background-color: $bg-color;
	.goods-info {
		padding: 14rpx 28rpx 28rpx 38rpx;
		background-color: #fff;
		.price {
			color: #e60b11;
			.icon {
				font-size: 22rpx;
			}
			.value {
				font-size: 40rpx;
				font-weight: bold;
			}
		}
		.share {
			margin: 0;
			padding: 0;
			line-height: inherit;
			background-color: #fff;
			.text {
				color: #666;
				font-size: 20rpx;
			}
		}
		.original {
			color: #666;
			font-size: 24rpx;
			text-decoration: line-through;
		}
		.sales {
			color: #666;
			font-size: 24rpx;
		}
		.title {
			margin-top: 30rpx;
			color: #333;
			font-size: 34rpx;
		}
	}
	.ensure-box {
		margin-top: 24rpx;
		height: 92rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		.item {
			flex: 1;
			text-align: center;
			.iconfont {
				color: #444;
				font-size: 24rpx;
			}
			.text {
				margin-left: 8rpx;
				color: #666;
				font-size: 24rpx;
			}
		}
	}
	.detail-box {
		margin-top: 24rpx;
		padding: 0 28rpx 28rpx;
		background-color: #fff;
		.title {
			height: 84rpx;
			color: #333;
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
			line-height: 84rpx;
		}
	}
	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		padding-left: 14px;
		padding-right: 30rpx;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		height: 112rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		.tool-box {
			margin-right: 14rpx;
			height: 112rpx;
			display: flex;
			.item {
				width: 100rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.label {
					color: #666;
					font-size: 22rpx;
				}
			}
		}
		.btn {
			flex: 1;
			margin: 0;
			padding: 0;
			border-radius: 72rpx;
			height: 72rpx;
			color: #fff;
			font-size: 26rpx;
			line-height: 72rpx;
			background-color: #cd2a1b;
		}
	}
	.service-popup {
		width: 630rpx;
		border-radius: 28rpx;
		padding: 80rpx 0 86rpx;
		background: linear-gradient(0deg, #ad3368, #2751e3);
		color: #fff;
		text-align: center;
		.title {
			font-size: 48rpx;
			font-weight: bold;
		}
		.qrcode-box {
			margin: 40rpx auto 26rpx;
			width: 426rpx;
			height: 426rpx;
			border-radius: 16rpx;
			text-align: center;
			line-height: 426rpx;
			background-color: #fff;
			.qrcode {
				width: 360rpx;
				height: 360rpx;
			}
		}
		.tips {
			font-size: 26rpx;
		}
	}
	::v-deep {
		.u-popup .icon--u-icon {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			border: 1rpx solid rgba(255, 255, 255, 0.8);
			background-color: rgba(255, 255, 255, 0.2);
			display: flex !important;
			justify-content: center;
			.u-icon__icon {
				font-size: 20rpx !important;
				color: rgba(255, 255, 255, 0.8) !important;
			}
		}
	}
}
</style>
